<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>Document</title>
		<link rel="stylesheet" href="../../css/api.css">
		<link rel="stylesheet" href="../../css/aui_font.css">
		<link rel="stylesheet" href="../../css/base_icon.css">
		<style>
			body {
				height: 100vh;
				background-color: #F9FAFE;
			}

			.box {

				padding: 20px;
			}

			.top {
				width: 100%;
				display: flex;
				color: #FFFEFF;
			}

			.top .name {
				color: #FFFEFF;
				font-size: 12px;
			}

			.top .code {
				color: #FFFEFF;
				font-size: 14px;
			}

			.card {
				background-image: linear-gradient(to right, #A795FB, #9C85FA, #8368F4);
				padding: 20px;
				border-radius: 20px;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
			}

			.count {
				padding: 20px 0;
				display: flex;
				align-items: flex-end;
			}

			.count .money {

				color: #FFFEFF;
				font-size: 40px;
				line-height: 30px;
				font-weight: bold;
			}

			.dong {
				color: #9F88FA;
				padding: 10px;
				background-color: #FFFFFF;
				border-radius: 10px;
			}
			.con{
				padding: 20px;
				background-color: #FFFEFF;
				border-radius: 20px 20px 0 0;
			}
			.title{
				padding: 10px 0;
			}
			.input{
				width: calc(100% - 40px);
				background-color: #FBFBFB;
				padding: 20px;
				border-radius: 10px;
			}
			.input:focus{
				outline: none;
			}
			.list{
				padding: 10px;
			}
			.item{
				padding: 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.item-type{
				font-size: 16px;
				font-weight: bold;
			}
			.bang{
				color: #8C73F6
			}
			.desc{
				padding: 20px 0;
				color: #DAD9DF
			}
			.btn{
				width: 100%;
				padding: 12px 0;
				background-color: #CDCDCD;
				border-radius: 40px;
				text-align: center;
				color: #FFFEFF;
			}
			.on{
				background-color: #8F76F7;
			}
		</style>
	</head>

	<body>
		<div id="view">
			<div class="box">
				<div class="card">
					<div class="top">
						<div class="name">{{_i18n('积分余额')}}</div>
					</div>
					<div class="count">
						<div class="money">{{info.score}}</div>
					</div>
					<!-- <div class="dong">
		   		0冻结积分
		   	</div> -->
				</div>
			</div>

			<div class="con">
				<div class="title">{{_i18n('请输入兑换的积分数值')}}</div>
				<input type="number" v-model="money" class="input" :placeholder="_i18n('请输入兑换的积分数值')">
				<div class="title">{{_i18n('提款方式')}}</div>
				<div class="list">
					<div class="item">
						<div class="item-type">{{_i18n('选择提现支付宝')}}</div>
						<div> <input v-if="info.zhifucount" name="method" type="radio" @click="setType(1)" :checked="method == 1">
							<div v-else class="bang" @click="toSet(escape_a)">{{_i18n('去绑定')}}>></div>
						</div>
					</div>
					<div class="item">
						<div class="item-type">{{_i18n('选择提现微信')}}</div>
						<div> <input v-if="info.wxcount" name="method" type="radio" @click="setType(2)" :checked="method == 2">
							<div v-else class="bang" @click="toSet(escape_w)">{{_i18n('去绑定')}}>></div>
						</div>
					</div>
				</div>
				<div class="desc">{{_i18n('提取规则')}}<br />{{_i18n('单次最多可以兑换20000积分,每天最多可提现3次')}}</div>
				<div :class="{btn: true, on: money && method}" @click="tixian()">{{_i18n('立即兑换')}}</div>
			</div>
		</div>
	</body>
	<script src="../../script/api.js"></script>
	<script src="../../script/ffkj.js"></script>
	<script src="../../script/vue.js"></script>
	<script>
		var view = new Vue({
			el: '#view',
			data: {
				info: {
					"score": 0,
					"zhifucount": "",
					"zhifuname": "",
					"wxcount": "",
					"wxname": ""
				},
				money: '',
				escape_a: escape_a,
				escape_w: escape_w,
				list: [],
				method: ''
			},
			methods: {
				toSet(escape_a) {
					_url({
					    url: 'frame4/set_paya',
					    title: '设置'+escape_a,
						type: escape_a
					})
				},
				setType(type){
					this.method = type
				},
				tixian(){
					_ajax('api/proxy/addwithdraw', function(ret, err) {
						if (ret && ret.code == 200) {
						    _msg('申请成功');
						    getInfo()
						} else {
						    _msg(ret.msg);
						}
					}, {
						user_id: $api.getStorage('userid'),
						money: this.money,
						method: this.method
					})
				}
			},
		})
		apiready = function() {
			// 设置了支付方式
			_listener('pay_refresh', function(ret) {
			   getInfo()
			})
			getInfo()
		}

		function getInfo() {
			_ajax('api/proxy/dashboard', function(ret, err) {
				if (ret && ret.data && ret.data) {
					view.info = ret.data
				}
			}, {
				user_id: $api.getStorage('userid')
			})
		}
	</script>

</html>
